/**
 * Created by ziyu on 17/3/13.
 */
import React from 'react'
import {Table, Icon, Card, Collapse} from 'antd'
import Styles from '../Index.less'
import {fetchPost} from './../../../../../utils/request'

const Panel = Collapse.Panel

class LoanRecord extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tradeNo: props.tradeNo,
      loading: false,
      list: [],
      message: '',
      timer: null
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.tradeNo != props.tradeNo) {
      this.setState({
        tradeNo: props.tradeNo
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  getData() {
    this.setState({
      loading: true
    })
    if (this.state.tradeNo) {
      fetchPost(`/order/repayment/flow/list`, {
        tradeNo: this.state.tradeNo
      }).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            this.setState({
              list: json.data.repaymentFlowList,
              loading: false
            })
          }
        } else {
          this.setState({
            list: [],
            loading: false,
            message: json.msg
          })
        }
      })
    } else {
      this.setState({
        list: [],
        loading: false
      })
    }
  }

  title() {
    if (this.state.message) {
      setTimeout(() => {
        this.setState({
          message: ''
        })
      })
      return (
        <div>
          <span className='mr10'>Payment record</span>
          <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
        </div>
      )
    } else {
      return 'Payment record'
    }
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)

      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  render() {
    const columns = [
      {
        title: 'Loan ID',
        dataIndex: 'tradeNo',
        key: 'tradeNo'
      },
      {
        title: 'Payment mode',
        dataIndex: 'paymentChannel',
        key: 'paymentChannel'
      },
      {
        title: 'Transaction date',
        dataIndex: 'paymentTime',
        key: 'paymentTime'
      },
      {
        title: 'Transaction status',
        dataIndex: 'status',
        key: 'status'
      }
    ]

    return (
      <div className={Styles.loanRecord}>

        <Collapse defaultActiveKey={['1']}>
          <Panel header="Payment record" key="1">
            <Table
              pagination={false}
              bordered
              size='small'
              dataSource={this.state.list}
              columns={columns}
              loading={this.state.loading}
            />
          </Panel>
        </Collapse>

      </div>
    )
  }
}

export default LoanRecord
